<template>
  <a-button class="btnStyle" @click="showModal">已保存码值（已引用码表）</a-button>
  <a-modal v-model:visible="dislog" title="码值定义" style="text-align: center" width="60%" :footer="false" bordered>
    <p style="float: left; font-weight: 1000">引用码表名称：错误码码表1</p>
    <a-popconfirm title="请确认是否解除码表引用？" ok-text="确认" cancel-text="取消" @confirm="handle">
      <a-button type="primary" style="float: right; border-radius: 7%">解除码表引用</a-button>
    </a-popconfirm>
    <a-table :columns="columns" :data-source="data" size="middle" :pagination="false" />
    <div class="footer">
      <a-button type="dashed" @click="handleOk">取消</a-button>
      <a-button type="primary" style="margin-left: 10px" @click="handleOk">确认</a-button>
    </div>
  </a-modal>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import { getdataHook } from '@/hooks/InterfaceManagementHooks/getStopHook';
  const { dislog, dislog1 } = getdataHook();
  //已保存码值（已引用码表）
  // const visible = ref<boolean>(false);

  const showModal = () => {
    dislog.value = true;
  };

  const handleOk = (e: MouseEvent) => {
    console.log(e);
    dislog.value = false;
  };
  const handle = () => {
    console.log(11111111);
    dislog1.value = true;
    dislog.value = false;
  };
  //码值详情的数据
  const data = ref([
    {
      codeValueId: '1',
      codeValueKey: '200',
      codeValueName: '调用成功',
      codeValueMean: '接口调用成功',
    },
    {
      codeValueId: '2',
      codeValueKey: '400',
      codeValueName: '调用失败',
      codeValueMean: '接口调用失败',
    },
  ]);
  //码值详情的相关信息
  const columns = [
    {
      title: '码值取值',
      dataIndex: 'codeValueKey',
      key: 'codeValueKey',
    },
    {
      title: '码值名称',
      dataIndex: 'codeValueName',
      key: 'codeValueKey',
    },
    {
      title: '码值含义',
      dataIndex: 'codeValueMean',
      key: 'codeValueKey',
    },
  ];
</script>
<style scoped>
  .btnStyle {
    margin-top: 10px;
    border: 1px solid lightgray;
    background-color: rgb(238, 238, 238);
  }

  #components-a-popconfirm-demo-placement .ant-btn {
    margin-right: 8px;
    margin-bottom: 8px;
    padding: 0;
    width: 70px;
    text-align: center;
  }
</style>
